<template>
    <view class="margin_bottom_80">
        <view>
            <!-- <nav-bar fontColor="#fff"
                     :bgColor="['#63B9F2','#63B9F2']">
            </nav-bar> -->
            <view class="top_bg u-flex u-row-around">
                <view class="pay_success_text">{{ orderData.status | statusFilter }}</view>
                <image v-if="showSuccess"
                       class="pay_success_img"
                       src="/static/images/ddxq_icon_successful@2x.png"
                       mode="" />
                <image v-if="showLoading"
                       class="pay_success_img"
                       src="/static/images/ddxq_icon_wait@2x.png"
                       mode="" />

            </view>
            <view class="top_card">
                <view class="container_box u-flex-col ">
                    <view class="title">已报课程</view>
                    <u-sticky :offset-top="0"
                              @fixed="isStickyFixed = true"
                              @unfixed="isStickyFixed = false">
                        <view :class="{ 'tab_sticky': isStickyFixed }">
                            <u-tabs :list="curriculumTypeList"
                                    name="name"
                                    paddingRight="20rpx"
                                    :current="currentTabIndex"
                                    @change="tabChange"
                                    height="80"
                                    font-size="32"
                                    bar-width="64"
                                    gutter="14"
                                    bg-color="#fff"
                                    inactive-color="#666666"
                                    active-color="#63B9F2"></u-tabs>
                        </view>

                    </u-sticky>
                    <view class="u-flex">
                        <image class="order_img"
                               :src="orderDetail.skuPic"
                               mode="" />
                        <view class="right_box">
                            <view class="order_title">{{ orderDetail.productName }}</view>
                            <view class="order_tuition">价格：{{ orderDetail.totalAmount / 100 }}</view>

                            <view class="u-flex u-row-between">
                                <view class=" u-flex-col">
                                    <view class="order_material"
                                          v-for="(item,index) in skuData"
                                          :key="index">
                                        {{ item.name }}：
                                        {{ item.value }}
                                    </view>
                                </view>
                                <view class="u-flex-col">
                                    <view>
                                        <span>实付款：</span>
                                        <span class="price_number">{{ orderDetail.payAmount / 100 }}</span>
                                    </view>
                                    <view style="color:#e6a23c;"
                                          v-if="orderDetail.status == 20">退款处理中</view>
                                    <view style="color:#1B93F8;"
                                          v-if="orderDetail.status == 21">退款成功</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="container_box">
                    <view class="title">已报学生
                        <span class="student_total">({{ studentList.length }})人</span>
                    </view>

                    <view class="student_box u-flex u-flex-wrap">
                        <view class="student_item"
                              :class="{'no_margin_right': index!=0 && index%4 == 0}"
                              v-for="(item,index) in studentList"
                              :key="index">
                            <image class="student_icon"
                                   :src="!item.gender ? '/static/images/mine/coommon_icon_boy01@2x.png' : '/static/images/mine/coommon_icon_girl01@2x.png'"
                                   mode="" />
                            <view class="student_name">{{ item.childrenName }}</view>
                            <view class="student_class">{{ item.childrenClass }}</view>
                        </view>
                    </view>
                </view>
                <view class="images_box">
                    <image src="/static/images/ddxq_pic_banner@2x.png"
                           mode="" />
                    <button class="share_btn"
                            type="default"
                            open-type="share">去分享</button>
                    <view class="surplus_number">剩余名额：{{ classScheduleData.residueStock }}</view>
                </view>

                <view class="details_item_box">
                    <view class="title_box">
                        <view class="title1">{{ orderDetail.productName }}</view>
                    </view>
                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_nj@2x.png"
                               mode="" />
                        <view class="details_info_text">年级：
                            <span v-for="(item,index) in classScheduleData.childrenClasss"
                                  :key="index">{{ item +'，'}}</span>
                        </view>
                    </view>
                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_time@2x.png"
                               mode="" />
                        <view v-if="classScheduleData.weekStr"
                              class="details_info_text">课程：一周{{ classScheduleData.weekStr.length == 1 ? '一':'两' }}节课，{{ classScheduleData.weekStr && classScheduleData.weekStr.join(',') }} 上课</view>
                    </view>
                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_time@2x.png"
                               mode="" />
                        <view v-if="classScheduleData.weekStr"
                              class="details_info_text">上课时间：{{ classScheduleData.weekStr[0] + ','+ classScheduleData.schoolTimeStr[0] + ';' + classScheduleData.weekStr[1] + ','+ classScheduleData.schoolTimeStr[1]  }}</view>
                    </view>
                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_person@2x.png"
                               mode="" />
                        <view class="details_info_text">人数：{{ classScheduleData.stock }}</view>
                    </view>
                </view>
                <view class="details_item_box"
                      v-for="(item,index) in detailTabs"
                      :key="index">
                    <view class="title_box u-flex">
                        <span class="title1">{{ item.title }}</span>
                    </view>
                    <u-parse :html="item.tabDetails"></u-parse>
                </view>
            </view>
        </view>
        <view style="height: 1px;"></view>
        <view class="footer_box safe-area-inset-bottom">
            <view class="u-flex u-row-right"
                  v-if="orderType == 'orderList' || (orderData.status == 1000 || orderData.status == 81)">
                <u-button @click="showModel=true;modelType=0"
                          v-if="orderData.status == 1000 && orderDetail.status!= 20"
                          type="primary"
                          :custom-style="customStyle"
                          :ripple="true"
                          shape="circle"> 申请调课 </u-button>
                <u-button @click="showModel=true;modelType=1"
                          v-if="(orderData.status == 1000 || orderData.status == 81) && orderDetail.status==0"
                          type="primary"
                          :custom-style="customStyle"
                          :ripple="true"
                          shape="circle"> 申请退课 </u-button>
            </view>
            <view v-if="orderType == 'submitOrder'">
                <u-button @click="$goto('back',1)"
                          v-if="orderData.status == 1000"
                          type="primary"
                          :custom-style="confirmStyle"
                          :ripple="true"
                          shape="circle"> 返回了解课程 </u-button>
            </view>
            <view v-if="orderData.status == 20"
                  class=" u-flex u-row-between">
                <view class="price_number">
                    <span>￥</span><span class="price">{{ orderData.payAmount }}</span>
                </view>
                <view class="u-flex u-row-right">
                    <u-button @click="launchPayFun"
                              type="primary"
                              :custom-style="confirmStyle"
                              :ripple="true"
                              shape="circle"> 去支付 </u-button>
                </view>
            </view>
        </view>
        <u-popup v-model="showModel"
                 mode="center"
                 border-radius="32"
                 width="80%">
            <view class="padding_box u-col-center u-flex-col u-row-center">
                <view class="title">提示</view>
                <view class="info">确定要申请{{ modelType==0 ? '调课':'退课' }}</view>
                <view class="btn_box u-flex u-row-between">
                    <u-button @click="showModel = false"
                              :custom-style="cancelStyle"
                              type="primary"
                              ripple
                              shape="circle"> 取消 </u-button>
                    <u-button style="margin-left:15rpx"
                              @click="confirmEdit"
                              type="primary"
                              :custom-style="confirmStyle"
                              :ripple="true"
                              shape="circle"> 确认 </u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            customStyle: {
                color: '#333',
                height: '80rpx',
                background: '#F5F5F5',
                borderRadius: '40rpx',
            },
            confirmStyle: {
                flex: 1,
                color: '#fff',
                height: '80rpx',
                background: '#63B9F2',
                borderRadius: '40rpx',
            },
            cancelStyle: {
                flex: 1,
                border: '1rpx solid #cccccc',
                color: '#333',
                height: '80rpx',
                background: '#fff',
                borderRadius: '40rpx',
            },
            studentList: [],
            orderData: {},
            showModel: false,
            modelType: 0,
            orderId: '',
            orderDetail: {},
            classScheduleData: {},
            skuData: [],
            orderType: '',
            detailTabs: [],

            currentTabIndex: 0,
            isStickyFixed: false,

            curriculumTypeList: ['测试1', '测试2']
        }
    },
    filters: {
        statusFilter(status) {
            switch (status) {
                case 1000:
                    return '支付成功'
                case 73:
                    return '退款成功'
                case 71:
                    return '退款处理中'
                case 81:
                    return '调课成功'
                case 20:
                    return '待付款'
                case 70:
                    return '退款中'
                case 80:
                    return '调课中'
            }
        }
    },
    computed: {
        showSuccess() {
            if (this.orderData.status == 1000 || this.orderData.status == 73 || this.orderData.status == 81) {
                return true
            }
            return false
        },
        showLoading() {
            if (this.orderData.status == 20 || this.orderData.status == 70 || this.orderData.status == 80) {
                return true
            }
            return false
        },
    },
    // 小程序自定义分享
    onShareAppMessage(res) {
        var _this = this;
        console.log("_this.userInfo.id", _this.classScheduleData.id)
        // var cid = uni.getStorageSync("campusId") ? uni.getStorageSync("campusId") : 1
        return {
            title: `${_this.orderDetail.productName}名额剩余${_this.classScheduleData.residueStock}名，快来跟我一起学吧~`,
            path: 'pages/curriculumDetails/curriculumDetails?itemId=' + _this.classScheduleData.id,
            imageUrl: _this.orderDetail.skuPic,
        }

    },
    onLoad(opt) {
        this.orderId = opt.orderId && opt.orderId
        this.orderType = opt.type && opt.type
        this.getOrderDetails()
    },
    methods: {
        tabChange(e) {
            this.currentTabIndex = e;
            this.orderDetail = this.orderData.items[e]
            this.classScheduleData = this.orderDetail.classSchedule
            this.detailTabs = JSON.parse(this.orderDetail.productResp.detailTabs)
            this.listClassSuccessChild(this.orderDetail.classSchedule.id)
            this.skuData = JSON.parse(this.orderDetail.skuData)
        },
        getOrderDetails() {
            this.$api.orderDetails({ id: this.orderId }, res => {
                if (res.code == 0) {

                    this.curriculumTypeList = res.data.items.map(ele => { return { name: ele.productName } })
                    console.log('------------------------', this.curriculumTypeList);
                    this.orderDetail = res.data.items[this.currentTabIndex]
                    this.classScheduleData = this.orderDetail.classSchedule
                    this.detailTabs = JSON.parse(this.orderDetail.productResp.detailTabs)
                    this.listClassSuccessChild(this.orderDetail.classSchedule.id)
                    this.skuData = JSON.parse(this.orderDetail.skuData)
                    this.orderData = res.data
                }
            });
        },
        listClassSuccessChild(id) {
            let data = {
                classScheduleId: id,
                pageSize: 100,
                pageNum: 1
            }
            this.$api.listClassSuccessChild(data, res => {
                if (res.code == 0) {
                    this.studentList = res.data.list
                }
            });
        },
        confirmEdit() {
            let data = {
                id: this.orderId,
            }
            let tipText = '申请退课'
            if (this.modelType == 0) {
                tipText = '申请调课'
                // 调课
                this.$api.applyForClass(data, res => {
                    if (res.code == 0) {
                        this.getOrderDetails()
                        this.$interactive.toast(tipText + '成功')
                    } else {
                        this.$interactive.toast(tipText + '失败')
                    }
                    this.showModel = false
                })
            } else {
                data.id = this.orderDetail.id
                // 退课
                this.$api.applyForClassRefund(data, res => {
                    if (res.code == 0) {
                        this.getOrderDetails()
                        this.$interactive.toast(tipText + '成功')
                    } else {
                        this.$interactive.toast(tipText + '失败')
                    }
                    this.showModel = false
                })
            }
        },
        launchPayFun() {
            let data = {
                orderId: this.orderId,
                appId: this.$appId,
                payWay: 201,
            }
            this.$api.launchPay(data, res => {
                if (res.code == 0) {
                    uni.requestPayment({
                        timeStamp: res.data.wxMpPayInfo.timeStamp + '',
                        nonceStr: res.data.wxMpPayInfo.nonceStr,
                        package: res.data.wxMpPayInfo.packageValue,
                        paySign: res.data.wxMpPayInfo.paySign,
                        signType: res.data.wxMpPayInfo.signType,
                        success(result) {
                            console.log('>>>>>>>>>>>>>>>>>>>orderId', res.data.orderId)
                            _this.$interactive.toast('支付成功')
                            _this.getOrderDetails()
                            // setTimeout(() => {
                            //     uni.redirectTo({
                            //         url: '/pages/orderDetails/orderDetails?orderId=' + res.data.orderId
                            //     });
                            // }, 500);
                        },
                        fail(res) {
                            if (res.errMsg !== 'requestPayment:fail cancel') {
                                _this.$interactive.toast('微信支付失败，请联系客服处理')
                            }
                            console.error('支付失败', res)
                        },
                        complete(res) {
                            console.error('支付完成', res)
                        }
                    })
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.padding_box {
    padding: 30rpx;
}
.container_box {
    padding: 30rpx;
    border-radius: 32rpx;
    background-color: #fff;
}
.container_box + .container_box {
    margin-top: 15rpx;
}

.order_img {
    width: 140rpx;
    height: 140rpx;
    margin-right: 40rpx;
    border-radius: 16rpx;
}
.right_box {
    width: 100%;
    flex: 1;
}
.order_title {
    margin-bottom: 15rpx;
    color: #333;
    font-weight: bold;
}
.order_tuition {
    margin: 7rpx 0;
}
.order_tuition,
.order_material {
    color: #999;
    font-size: 24rpx;
    font-weight: 500;
}
.price_number {
    color: #eb4b4b;
    font-size: 36rpx;
    .price {
        font-size: 48rpx;
        font-weight: bold;
        margin: 20rpx 10rpx 20rpx 0;
    }
}
.top_bg {
    height: 200rpx;
    background: #63b9f2;
    .pay_success_text {
        font-size: 48rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 50rpx;
    }
    .pay_success_img {
        width: 160rpx;
        height: 160rpx;
    }
}
.top_card {
    padding: 30rpx;
    position: relative;
    top: -100rpx;
    .tab_sticky {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 555;
        box-sizing: border-box;
        width: 100%;
    }
}
.student_box {
    .student_item {
        margin: 0 36rpx 30rpx 0;
        color: #333;
        text-align: center;
        &.no_margin_right {
            margin-right: 0;
        }
        .student_icon {
            width: 96rpx;
            height: 96rpx;
            border-radius: 100%;
        }
        .student_name {
            font-size: 24rpx;
            font-weight: bold;
        }
        .student_class {
            font-size: 20rpx;
        }
    }
}
.images_box {
    width: 100%;
    height: 154rpx;
    margin: 20rpx 0;
    position: relative;
    image {
        width: 100%;
        height: 100%;
    }
    .surplus_number {
        font-size: 28rpx;
        color: #fff;
        position: absolute;
        bottom: 24rpx;
        left: 48rpx;
    }
}
.share_btn {
    width: 100%;
    height: 154rpx;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
}
.margin_bottom_80 {
    margin-bottom: 50rpx;
}
.student_total {
    color: #999;
    font-weight: 500;
}

.price_box {
    color: #eb4b4b;
    font-size: 28rpx;
    margin-bottom: 32rpx;
    .price {
        font-size: 48rpx;
        font-weight: bold;
        margin: 20rpx 10rpx 20rpx 0;
    }
}
.details_item_box {
    padding: 32rpx;
    background: #ffffff;
    color: #333;
    border-radius: 32rpx;
    .title_box {
        margin-bottom: 32rpx;
    }
    .title1 {
        font-size: 36rpx;
        font-weight: bold;
    }
    .title2 {
        font-size: 28rpx;
        color: #999;
    }
    .details_info {
        margin-bottom: 20rpx;
    }
    .details_info_img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
    }
    .details_info_text {
        font-size: 28rpx;
    }
    .line_height_46 {
        line-height: 46rpx;
    }
    .grey_box {
        background: #f5f5f5;
        padding: 32rpx;
        border-radius: 16rpx;
    }
}
.details_item_box + .details_item_box {
    margin-top: 20rpx;
}
.btn_box {
    width: 100%;
    u-button {
        flex: 1;
    }
}
.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
}
.info {
    margin: 30rpx 0 60rpx 0;
}
</style>
